<template>
    <t-modal :title="'编辑'" :width="640" :visible="visible" :switchFullscreen="true" @ok="
      () => {
        $emit('ok');
      }
    " @cancel="
      () => {
        $emit('cancel');
      }
    ">
        <a-form :form="form">
            <a-row :gutter="16">
                <a-form-item class="hiddenItem">
                    <!-- uuid隐藏 -->
                    <a-input v-decorator="['uuid']" disabled type="hidden"/>
                </a-form-item>
                <a-col class="gutter-row" :span="24">
                    <a-form-item label="字段名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input v-decorator="['listClearly', { rules: [{ required: true, message: '必填!'}]}]"/>
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="24">
                    <a-form-item label="注释" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input v-decorator="['explain', { rules: [{ required: true, message: '必填!'}]}]"/>
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="24">
                    <a-form-item label="验证规则" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <TDictSelectTag placeholder="请选择验证规则" dataType="static" :dataList="validationRulesList"
                                        v-decorator="['validationRules']">
                        </TDictSelectTag>
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="24">
                    <a-form-item label="字典code" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <TDictSelectTag placeholder="请选择字典code" dataType="static" :dataList="dictionariesCodeList"
                                        v-decorator="['dictionariesCode']">
                        </TDictSelectTag>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </t-modal>
</template>

<script>
    import pick from "lodash.pick";
    // 表单字段
    const fields = [
        "uuid",
        'listClearly',
        "explain",
        'validationRules',
        'dictionariesCode',
    ];
    import TDictSelectTag from "@/components/TopVUI/dict/TDictSelectTag";

    export default {
        props: {
            visible: {
                type: Boolean,
                required: true,
            },
            loading: {
                type: Boolean,
                default: () => false,
            },
            model: {
                type: Object,
                default: () => null,
            },
        },
        components: {
            TDictSelectTag,
        },
        data() {
            return {
                title: "",
                labelCol: {
                    xs: {
                        span: 24,
                    },
                    sm: {
                        span: 5,
                    },
                },
                wrapperCol: {
                    xs: {
                        span: 24,
                    },
                    sm: {
                        span: 16,
                    },
                },
                databaseTypeList: [{value: 'MySQL', id: 1, label: 'MySQL'}, {
                    value: 'Oracle',
                    id: 1,
                    label: 'Oracle'
                }, {value: 'SqlServer', id: 1, label: 'SqlServer'}, {
                    value: 'PostgreSQL',
                    id: 1,
                    label: 'PostgreSQL'
                }, {value: '达梦', id: 1, label: '达梦'}],
                form: this.$form.createForm(this),
                validationRulesList:[
                    { label: "无", value: "0" },
                    {
                        label: "邮箱",
                        value: "/^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$/",
                    },
                    {
                        label: "手机号",
                        value: "/^1(3\\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\\d|9[0-35-9])\\d{8}$/",
                    },
                    {
                        label: "身份证",
                        value: "/(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/",
                    },
                    { label: "邮政编码", value: "/^[1-9]\\d{5}$/" }, // /[1-9]\\d{5}(?!\\d)/
                    { label: "6到18个字符之间", value: "/^.{6,18}$/" },
                    { label: "字母", value: "/^[A-Za-z]+$/" },
                    { label: "包含字母，数字，下划线和横线", value: "/^([a-z_A-Z—0-9]+)$/" }, ///^\\w+$/
                    { label: "包含字母，数字", value: "/^[A-Za-z0-9]+$/" },
                    { label: "日期格式", value: "/^\\d{4}-\\d{1,2}-\\d{1,2}/" },
                ],
                dictionariesCodeList:[],
                codeTxt:''
            };
        },
        methods: {
            add(m, data) {
                console.log(m, data);
            },
            edit(m, data) {
                console.log(m, data);
            },
            getDicSetCode() {
                this.$post("/system/dicSet/selectAll", { text: this.codeTxt }).then(
                    (res) => {
                        // this.dictionariesCodeList = res;
                        this.dictionariesCodeList = res.map(item => {
                            let obj = {label:'',value:''}
                            obj.label = item.text
                            obj.value = item.code
                            return obj
                        })
                    }
                );
            },
        },
        created() {
            // 防止表单未注册
            fields.forEach((v) => this.form.getFieldDecorator(v));
            // 当 model 发生改变时，为表单设置值
            this.$watch("model", () => {
                this.model && this.form.setFieldsValue(pick(this.model, fields));
            });
        },
        mounted(){
            this.getDicSetCode()
        }
    };
</script>
